<template>
  <div>
    <table>
      <thead>
      <tr>
        <th></th>
        <th @click="sort('year')">年度 ▼</th>
        <th @click="sort('name')">课题名称</th>
        <th @click="sort('sbfx')">申报方向</th>
        <th @click="sort('fzdw')">负责单位</th>
        <th @click="sort('jzsj')">截至时间</th>
        <th @click="sort('sbjc')">申报进程</th>
        <th @click="sort('psqk')">评审情况</th>
        <th @click="sort('sbdz')">申报地址</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in paginatedItems" :key="item.index">
        <td>{{ (currentPage - 1) * perPage + index + 1 }}</td> <!-- 计算序号 -->
        <td>{{ item.year }}</td>
        <td @click="openAttachment(item)" class="sbfx-name">{{ item.name }}</td>
        <td>{{ item.sbfx }}</td>
        <td>{{ item.fzdw }}</td>
        <td>{{ item.jzsj }}</td>
        <td>{{ item.sbjc }}</td>
        <td>{{ item.psqk }}</td>
        <td>{{ item.sbdz }}</td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button
        @click="prevPage"
        :disabled="currentPage === 1"
        :class="['nav-button', { disabled: currentPage === 1 }]">上一页</button>
      <span>当前 {{ currentPage }} 共 {{ totalPages }}页</span>
      <input type="fzdw" v-model.fzdw="inputPage" @change="jumpToPage" min="1" :max="totalPages" />
      <button
        @click="nextPage"
        :disabled="currentPage === totalPages"
        :class="['nav-button', { disabled: currentPage === totalPages }]">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 这里是你的数据
        { year: 2023, name: '蔡徐坤', sbfx: '工程1', fzdw: '12345', jzsj: 100000, sbjc: 50000, psqk: '单位1', sbdz: '进行中' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        { year: 2022, name: '项目B', sbfx: '工程2', fzdw: '67890', jzsj: 150000, sbjc: 75000, psqk: '单位2', sbdz: '已完成' },
        // 更多数据...
      ],
      sortBy: 'year',
      sortOrder: 'asc',
      currentPage: 1,
      perPage: 10, // 每页显示的项目数
      inputPage: 1 // 输入框的当前值
    };
  },
  computed: {
    sortedItems() {
      return this.items.sort((a, b) => {
        const modifier = this.sortOrder === 'asc' ? 1 : -1;
        if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier;
        if (a[this.sortBy] > b[this.sortBy]) return 1 * modifier;
        return 0;
      });
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.perPage;
      const end = start + this.perPage;
      return this.sortedItems.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.perPage);
    }
  },
  methods: {
    sort(key) {
      if (this.sortBy === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortBy = key;
        this.sortOrder = 'asc';
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    jumpToPage() {
      if (this.inputPage >= 1 && this.inputPage <= this.totalPages) {
        this.currentPage = this.inputPage;
      } else {
        this.inputPage = this.currentPage; // 如果输入无效，恢复当前页
      }
    },
    openAttachment(item) {
      // 这里可以添加打开附件的逻辑
      console.log('Opening attachment for:', item.name);
      // 例如，可以使用 window.open 打开一个新的页面或弹出窗口
      // window.open('/path/to/attachment', '_blank');
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 6px;
  border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {background-color: #f2f2f2;}
th {
  background-color: #2a9dc5;
  color: white;
  cursor: pointer;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
button {
  margin: 0 5px;
}
/*按钮*/
.nav-button {
  background-color: #007BFF; /* 蓝色背景 */
  color: white;              /* 白色文本 */
  border: none;              /* 无边框 */
  padding: 10px 20px;        /* 内边距 */
  font-size: 16px;           /* 字体大小 */
  cursor: pointer;           /* 指针光标 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}

.nav-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的深蓝色背景 */
}

.nav-button:disabled, .nav-button.disabled {
  background-color: #ccc; /* 禁用时的灰色背景 */
  cursor: not-allowed;    /* 禁用时的鼠标指针 */
  color: #666;            /* 禁用时的暗色文本 */
}
input[type="fzdw"] {
  width: 50px;
  text-align: center;
  margin: 0 5px;
}
td:hover {
  cursor: pointer;
  background-color: #e0e0e0;
}
.sbfx-name {
  color: #007bff; /* 你可以选择你喜欢的颜色 */
  cursor: pointer;
}
</style>
